<template>
  <div class="frontend-page">
    <div class="frontend-bg">
      <el-carousel height="520px" :interval="5000">
        <el-carousel-item v-for="item in bgList" :key="item.id">
          <img :src="item.img" alt="背景" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="frontend-container">
      <div class="frontend-container-content">
        <el-row :gutter="24">
          <!-- 文章列表渲染 -->
          <el-col :span="18"
            ><div class="frontend-container-list white">
              <ul>
                <li v-for="items in dataList" :key="items.id">
                  <el-row :gutter="20">
                    <!-- 图片渲染 -->
                    <el-col :span="8" class="frontend-container-list-img">
                      <img :src="items.img" alt="图片" />
                    </el-col>
                    <!-- 内容渲染 -->
                    <el-col :span="14" class="frontend-container-list-item">
                      <h3>
                        <nuxt-link
                          style="color: #111;"
                          :to="/posts/ + items.id"
                        >
                          <el-link style="font-size: 22px">{{
                            items.title
                          }}</el-link>
                        </nuxt-link>
                      </h3>
                      <p style="font-size: 14px;">{{ items.des }}</p>
                    </el-col>
                  </el-row>
                  <div
                    class="frontend-container-list-timer"
                    style="font-size: 13px;"
                  >
                    <span>{{ items.times }} </span>
                    <span style="margin-left:20px;">作者： Daes</span>
                  </div>
                </li>
              </ul>
              <!-- 分页 -->
              <el-pagination
                @size-change="handleSize"
                @current-change="handleCurrent"
                :page-sizes="[3, 6, 9, 21]"
                :current-page="pageList.pagenum"
                :page-size="pageList.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="margin-bottom: 20px;"
              >
              </el-pagination></div
          ></el-col>
          <!-- 排行榜 -->
          <el-col :span="6"
            ><div class="frontend-container-goods white">
              <h4><i class="iconfont icon-yanjing"></i>推荐阅读</h4>
              <ul>
                <li v-for="item in goodList" :key="item.id">
                  <nuxt-link :to="/posts/ + item.id">
                    <el-link> {{ item.title }}</el-link>
                  </nuxt-link>
                  <p>
                    <span>{{ item.times }}</span>
                  </p>
                </li>
              </ul>
            </div></el-col
          >
        </el-row>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
export default {
  data() {
    return {
      // 轮播图
      bgList: [{ id: 0, img: "//s1.ax1x.com/2020/05/24/YzrUXj.jpg" }],
      // 文章分页
      pageList: {
        pagenum: 0,
        pagesize: 3
      },
      // 文章列表
      dataList: [],
      // 总条数
      total: 0,
      // 推荐文章列表
      goodList: []
    };
  },
  created() {
    this.getList();
    this.handleGood();
  },
  methods: {
    // 获取文章列表
    async getList() {
      let { data: res } = await this.$axios.get(
        "http://47.107.156.169:3000/api/v1/more",
        {
          params: this.pageList
        }
      );
      if (res.meta.status !== 200) return this.$message.error("获取失败");
      res.data.mores.forEach(item => {
        let date = new Date(item.times);
        let y = date.getFullYear();
        let m = (date.getMonth() + 1 + "").padStart(2, "0");
        let d = (date.getDate() + "").padStart(2, "");
        item.times = y + "年" + m + "月" + d + "日" + "";
      });
      this.dataList = res.data.mores;
      this.total = res.data.totalpage;
    },
    // 每页显示个数选择器
    handleSize(val) {
      this.pageList.pagesize = val;
      this.getList();
    },
    // 选择当前页
    handleCurrent(val) {
      this.pageList.pagenum = val;
      this.getList();
    },
    // 请求推荐文章
    async handleGood() {
      let { data: res } = await this.$axios.get(
        "http://47.107.156.169:3000/api/v1/more",
        {
          params: {
            pagenum: 0,
            pagesize: 6
          }
        }
      );
      if (res.meta.status !== 200) return this.$message.error("获取失败");
      res.data.mores.forEach(item => {
        let date = new Date(item.times);
        let y = date.getFullYear();
        let m = (date.getMonth() + 1 + "").padStart(2, "0");
        let d = (date.getDate() + "").padStart(2, "");
        item.times = y + "年" + m + "月" + d + "日" + "";
      });
      this.goodList = res.data.mores;
    },
  },
  components: {
    Footer
  }
};
</script>

<style lang="scss" scoped>
.frontend-page {
  height: 100%;
  width: 100%;
  .frontend-bg {
    height: 38%;
    width: 100%;
    position: relative;
    z-index: -1;
    img {
      width: 100%;
    }
  }
  .frontend-container {
    width: 100%;
    background: #f6f6f6;
    .frontend-container-content {
      margin: 0 auto;
      height: 100%;
      max-width: 1200px;
      color: #111;
      .el-row {
        margin: 0 !important;
        padding: 0 !important;
      }
      .frontend-container-list {
        background: #f6f6f6;
        li {
          margin: 20px 0;
          min-height: 200px;
          width: 100%;
          background: #fff;
          overflow: hidden;
          position: relative;
          box-shadow: 0 0 10px #d4d4d4;
        }
        .frontend-container-list-img {
          padding-top: 20px;
          img {
            width: 200px;
          }
        }
        .frontend-container-list-item {
          h3,
          p {
            margin-top: 20px;
          }
        }
        .frontend-container-list-timer {
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
      }
      .frontend-container-goods {
        margin-top: 20px;
        min-height: 530px;
        min-width: 18%;
        h4 {
          padding: 17px 5px;
          font-weight: 200;
          font-size: 20px;
          color: #409eff;
          border-bottom: 1px solid #f5f5f5;
        }
        li {
          padding-top: 10px;
          height: 80px;
          box-shadow: 0 0 5px #e3e3e3;
          a {
            margin: 10px 0 0 10px;
          }
          p {
            margin-top: 20px;
            padding-right: 10px;
            text-align: right;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
